<!--订单主表管理-->
<template>
  <div id="businessOrderHeader">
    <van-dropdown-menu>
      <van-dropdown-item v-model="listQuery.orderStatus" :options="orderStatus" />
      <van-dropdown-item v-model="listQuery.sort" :options="sortOption" />
    </van-dropdown-menu>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="item in list" :key="item.id">
          <template>
            <span class="color-danger">￥{{ item.grandTotal }}</span>
          </template>
          <template slot="title">
            <van-tag v-if="item.channelPayWay" type="danger" style="margin-right:5px">{{ item.channelPayWay }}</van-tag>
            {{ item.orderName }}
          </template>
          <template slot="label">
            {{ item.orderDate | formatDate('yyyy-MM-dd hh:mm:ss') }}
          </template>
          <template #right-icon>
            <van-button v-if="item.orderStatus===0" type="info" style="margin-left:5px" size="mini" @click="handleDoPay(item.id)">支付</van-button>
            <van-button v-if="item.orderStatus===2" type="danger" style="margin-left:5px" size="mini" @click="handleDoRefund(item.id)">退款</van-button>
          </template>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {

  data() {
    return {
      loading: false,
      finished: false,
      refreshing: false,
      orderStatus: [
        { text: '全部订单', value: '' },
        { text: '已付款', value: '2' },
        { text: '待付款', value: '0' },
        { text: '付款失败', value: '1' },
        { text: '已关闭', value: '3' }
      ],
      sortOption: [
        { text: '默认排序', value: '-gmtCreated' },
        { text: '支付排序', value: '-payTime' }
      ],
      list: [],
      listQuery: {
        page: 1,
        limit: 20,
        orderStatus: '0',
        sort: '-gmtCreated'
      },
      orderHeader: {
        header: {},
        payRecord: {}
      },
      recordShow: false,
      orderJSON: {}
    }
  },
  watch: {
    'listQuery.orderStatus': function(val) {
      this.onRefresh()
    },
    'listQuery.sort': function(val) {
      this.onRefresh()
    }
  },
  created() {
  },
  methods: {
    onLoad() {
      if (this.refreshing) {
        this.list = []
        this.refreshing = false
      }
      this.$store.dispatch('businessOrderHeaderPage', this.listQuery).then(response => {
        if (response.total === 0) {
          this.list = []
          this.refreshing = false
          this.finished = true
          return
        }
        this.list.push(...response.records)

        if (this.listQuery.page === response.pages) {
          this.finished = true
        } else {
          this.loading = false
          this.listQuery = {
            ...this.listQuery,
            page: this.listQuery.page + 1
          }
        }
      })
    },
    onRefresh() {
      this.finished = false
      this.loading = true
      this.listQuery = {
        ...this.listQuery,
        page: 1
      }
      this.list = []
      this.onLoad()
    },
    handleReconciliation(row) {
      this.$store.dispatch('orderReconciliation', row.id).then(res => {
        this.msgSuccess('对账成功')
        this.recordShow = true
        this.orderJSON = res
        this.fetchData()
      })
    },
    handleDoPay(orderId) {
      this.$nextTick(() => {
        this.$emit('doPay', orderId)
      })
    },
    handlePayNotify(val) {
      this.onRefresh()
    },
    handleDoRefund(orderId) {
      this.$store.dispatch('refundPay', {
        orderNo: orderId,
        refundAmount: 0.01,
        refundReason: '我就想退款'
      }).then((res) => {
        this.msgSuccess('退款申请已发起')
        this.onRefresh()
      }).catch((_) => {})
    }

  }
}
</script>
<style lang="scss" scoped>
</style>

